<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图标生成器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .icon-preview {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 20px 0;
        }
        .icon-item {
            text-align: center;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 8px;
            background: white;
        }
        canvas {
            border: 1px solid #ccc;
            border-radius: 8px;
        }
        .download-btn {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        .download-btn:hover {
            background: #0056b3;
        }
        .instructions {
            background: #e9ecef;
            padding: 15px;
            border-radius: 5px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🏠 房屋拍照应用图标生成器</h1>
        
        <div class="instructions">
            <h3>使用说明：</h3>
            <ol>
                <li>点击下方按钮生成不同尺寸的图标</li>
                <li>右键点击图标选择"图片另存为"</li>
                <li>将图标文件保存到项目根目录</li>
                <li>重新打包应用即可看到新图标</li>
            </ol>
        </div>

        <div class="icon-preview" id="iconPreview">
            <!-- 图标将在这里生成 -->
        </div>

        <button class="download-btn" onclick="generateIcons()">生成所有图标</button>
        <button class="download-btn" onclick="downloadAll()">下载所有图标</button>
    </div>

    <script>
        function generateIcons() {
            const sizes = [48, 72, 96, 128, 144, 192];
            const container = document.getElementById('iconPreview');
            container.innerHTML = '';

            sizes.forEach(size => {
                const canvas = document.createElement('canvas');
                canvas.width = size;
                canvas.height = size;
                const ctx = canvas.getContext('2d');

                // 创建渐变背景
                const gradient = ctx.createLinearGradient(0, 0, size, size);
                gradient.addColorStop(0, '#4CAF50');
                gradient.addColorStop(1, '#2196F3');
                ctx.fillStyle = gradient;
                ctx.fillRect(0, 0, size, size);

                // 绘制房子图标
                ctx.fillStyle = 'white';
                const houseSize = size * 0.6;
                const houseX = (size - houseSize) / 2;
                const houseY = (size - houseSize) / 2;

                // 房子主体
                ctx.fillRect(houseX + houseSize * 0.2, houseY + houseSize * 0.4, houseSize * 0.6, houseSize * 0.5);
                
                // 屋顶
                ctx.beginPath();
                ctx.moveTo(houseX, houseY + houseSize * 0.4);
                ctx.lineTo(houseX + houseSize * 0.5, houseY + houseSize * 0.1);
                ctx.lineTo(houseX + houseSize, houseY + houseSize * 0.4);
                ctx.closePath();
                ctx.fill();

                // 门
                ctx.fillStyle = '#333';
                ctx.fillRect(houseX + houseSize * 0.35, houseY + houseSize * 0.6, houseSize * 0.3, houseSize * 0.3);

                // 窗户
                ctx.fillStyle = '#87CEEB';
                ctx.fillRect(houseX + houseSize * 0.25, houseY + houseSize * 0.45, houseSize * 0.15, houseSize * 0.15);
                ctx.fillRect(houseX + houseSize * 0.6, houseY + houseSize * 0.45, houseSize * 0.15, houseSize * 0.15);

                // 相机图标
                ctx.fillStyle = 'white';
                const cameraSize = size * 0.25;
                const cameraX = size * 0.75;
                const cameraY = size * 0.75;
                
                // 相机主体
                ctx.fillRect(cameraX, cameraY, cameraSize, cameraSize * 0.7);
                ctx.fillRect(cameraX - cameraSize * 0.1, cameraY + cameraSize * 0.1, cameraSize * 1.2, cameraSize * 0.5);
                
                // 镜头
                ctx.fillStyle = '#333';
                ctx.beginPath();
                ctx.arc(cameraX + cameraSize * 0.5, cameraY + cameraSize * 0.35, cameraSize * 0.15, 0, 2 * Math.PI);
                ctx.fill();

                const iconItem = document.createElement('div');
                iconItem.className = 'icon-item';
                iconItem.innerHTML = `
                    <canvas id="canvas-${size}"></canvas>
                    <p>${size}x${size}</p>
                    <button class="download-btn" onclick="downloadIcon(${size})">下载</button>
                `;
                container.appendChild(iconItem);

                // 将canvas内容复制到新的canvas
                const newCanvas = iconItem.querySelector(`#canvas-${size}`);
                const newCtx = newCanvas.getContext('2d');
                newCanvas.width = size;
                newCanvas.height = size;
                newCtx.drawImage(canvas, 0, 0);
            });
        }

        function downloadIcon(size) {
            const canvas = document.querySelector(`#canvas-${size}`);
            const link = document.createElement('a');
            link.download = `icon-${size}.png`;
            link.href = canvas.toDataURL();
            link.click();
        }

        function downloadAll() {
            const sizes = [48, 72, 96, 128, 144, 192];
            sizes.forEach(size => {
                setTimeout(() => downloadIcon(size), size * 10);
            });
        }

        // 页面加载时自动生成图标
        window.onload = generateIcons;
    </script>
</body>
</html> 